<template>
	<view>
		<view class="userinfo-container">
			<view class="userinfo-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->
			
				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backSetting()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					账户资料
				</view>
			</view>
			<view class="userinfo-content">
				<view class="info-list">
					<view class="info-item">
						<view class="item-name">
							头像
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
						<view class="user-avatar">
							<img class="user-avatar-img" :src="userDetail.data.userAvatar" alt="" />
						</view>
					</view>
					<view class="info-item">
						<view class="item-name">
							用户ID
						</view>
						<view class="right-text">
							{{userDetail.data.pubilcId}}
						</view>
					</view>
					<view class="info-item">
						<view class="item-name">
							昵称
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
						<view class="right-text">
							{{userDetail.data.nickname}}
						</view>
					</view>
					<view class="info-item">
						<view class="item-name">
							性别
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
						<view class="right-text">
							{{userDetail.data.gender}}
						</view>
					</view>
					<view class="info-item">
						<view class="item-name">
							出生日期
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
					<!-- 	<view class="right-text">
							{{userDetail.data.birthDate}}
						</view> -->
						<view class="right-text">
						<uni-datetime-picker type="date" :border="false" :clear-icon="false" v-model="userDetail.data.birthDate"/>
						</view>
						
					</view>
					<view class="info-item">
						<view class="item-name">
							简介
						</view>
						<view class="arrow-right">
							<uni-icons class="arrow-next" color="#999" type="right" size="18"></uni-icons>
						</view>
						<view class="right-text">
							{{userDetail.data.personalBio}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		onBeforeMount,
		watch,
		watchEffect
	} from 'vue';
	
	let backSetting = ()=>{
		uni.navigateTo({
			url:"/pages/setting/setting"
		})
	}
	let userDetail = ref({
		code: 2000,
		msg: "success",
		data: {
			userId: 1,
			pubilcId:"DX89099990",
			nickname: "唱跳rap篮球",
			gender:"男",
			following: 108,
			followers: 10,
			phone:18366567787,
			birthDate:"2004-05-03",
			personalBio:"一枚SRE攻城狮",
			userAvatar: "https://gd-hbimg.huaban.com/f745f4d45175d04e4c85f8c9f34409b1dd5eeb5612e43-VRcM5M_fw1200"
		}
	})
	
	onMounted(()=>{
	
	})
</script>

<style lang="scss" scoped>
	.userinfo-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;
		
		.userinfo-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
		
			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}
		
			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;
		
			}
		}
		
		.userinfo-content {
			width: 100%;
			height: auto;
			float: left;
			
			.info-list {
				height: atuo;
				width: 100%;
				float: left;
				
				.info-item {
					width: 100%;
					height: 53px;
					background: #fff;
					border-top: 1px solid #dbdbdb;
					box-sizing: border-box;
					padding: 0px 15px;
					float: left;
				
					.item-name {
						width: auto;
						height: 53px;
						float: left;
						line-height: 53px;
						font-size: 13px;
					}
				
					.user-avatar {
						width: auto;
						height: 53px;
						float: right;
						box-sizing: border-box;
						padding: 8.5px 0px;
						margin-right: 10px;
				
						.user-avatar-img {
							width: 36px;
							height: 36px;
							border-radius: 4px;
							box-shadow: 0px 0px 2px 0px #333;
						}
					}
				
					.arrow-right {
						width: auto;
						height: 53px;
						float: right;
				
						.arrow-next {
							line-height: 53px;
						}
					}
					
					.right-text {
						height: 53px;
						color: #999;
						font-size: 14px;
						float: right;
						padding-right: 10px;
						line-height: 53px;
					}
				}
			}
			:deep {
				.uniui-calendar {
					display: none !important;
				}
				.uni-date__x-input {
					height: 52px !important;
					line-height: 53px !important;
					color: #999;
				}
			}
			
		}
	}
	
	:deep {
		.uni-calendar-item--checked {
			background-color: #ff2d2de2 !important;
		}
		.uni-datetime-picker--btn {
			background-color: #ff2d2de2 !important;
		}
	}
</style>
